import {
  defineComponent,
  ref,
  computed,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref,
  pushScopeId,
  popScopeId
} from "vue";
import { b as useProp, h as uuid, _ as _export_sfc } from "./index-CEDaTd93.js";
const _withScopeId = n => (
  pushScopeId("data-v-0a9ce059"), (n = n()), popScopeId(), n
);
const _hoisted_1 = { class: "dv-border-box-8" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["id", "d"];
const _hoisted_4 = ["id"];
const _hoisted_5 = /* @__PURE__ */ _withScopeId(() =>
  /* @__PURE__ */ createElementVNode(
    "stop",
    {
      offset: "0%",
      "stop-color": "#fff",
      "stop-opacity": "1"
    },
    null,
    -1
  )
);
const _hoisted_6 = /* @__PURE__ */ _withScopeId(() =>
  /* @__PURE__ */ createElementVNode(
    "stop",
    {
      offset: "100%",
      "stop-color": "#fff",
      "stop-opacity": "0"
    },
    null,
    -1
  )
);
const _hoisted_7 = [_hoisted_5, _hoisted_6];
const _hoisted_8 = ["id"];
const _hoisted_9 = ["fill"];
const _hoisted_10 = ["dur", "path"];
const _hoisted_11 = ["fill", "points"];
const _hoisted_12 = ["stroke", "xlink:href"];
const _hoisted_13 = ["stroke", "xlink:href", "mask"];
const _hoisted_14 = ["from", "to", "dur"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderBox",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const path = ref(`border-box-8-path-${uuid()}`);
    const gradient = ref(`border-box-8-gradient-${uuid()}`);
    const mask = ref(`border-box-8-mask-${uuid()}`);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    const dur = computed(() => {
      if (propValue.base.dur) {
        return propValue.base.dur;
      }
      return 3;
    });
    const length = computed(() => {
      return (width.value + height.value - 5) * 2;
    });
    const pathD = computed(() => {
      if (propValue.base.reverse) {
        return `M 2.5, 2.5 L 2.5, ${height.value - 2.5} L ${
          width.value - 2.5
        }, ${height.value - 2.5} L ${width.value - 2.5}, 2.5 L 2.5, 2.5`;
      }
      return `M2.5, 2.5 L${width.value - 2.5}, 2.5 L${width.value - 2.5}, ${
        height.value - 2.5
      } L2.5, ${height.value - 2.5} L2.5, 2.5`;
    });
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              class: "dv-border-svg-container",
              width: width.value,
              height: height.value
            },
            [
              createElementVNode("defs", null, [
                createElementVNode(
                  "path",
                  {
                    id: path.value,
                    d: pathD.value,
                    fill: "transparent"
                  },
                  null,
                  8,
                  _hoisted_3
                ),
                createElementVNode(
                  "radialGradient",
                  {
                    id: gradient.value,
                    cx: "50%",
                    cy: "50%",
                    r: "50%"
                  },
                  _hoisted_7,
                  8,
                  _hoisted_4
                ),
                createElementVNode(
                  "mask",
                  { id: mask.value },
                  [
                    createElementVNode(
                      "circle",
                      {
                        cx: "0",
                        cy: "0",
                        r: "150",
                        fill: `url(#${gradient.value})`
                      },
                      [
                        createElementVNode(
                          "animateMotion",
                          {
                            dur: `${dur.value}s`,
                            path: pathD.value,
                            rotate: "auto",
                            repeatCount: "indefinite"
                          },
                          null,
                          8,
                          _hoisted_10
                        )
                      ],
                      8,
                      _hoisted_9
                    )
                  ],
                  8,
                  _hoisted_8
                )
              ]),
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.backgroundColor,
                  points: `5, 5 ${width.value - 5}, 5 ${width.value - 5} ${
                    height.value - 5
                  } 5, ${height.value - 5}`
                },
                null,
                8,
                _hoisted_11
              ),
              createElementVNode(
                "use",
                {
                  stroke: unref(propValue).base.colorLeft,
                  "stroke-width": "1",
                  "xlink:href": `#${path.value}`
                },
                null,
                8,
                _hoisted_12
              ),
              createElementVNode(
                "use",
                {
                  stroke: unref(propValue).base.colorRight,
                  "stroke-width": "3",
                  "xlink:href": `#${path.value}`,
                  mask: `url(#${mask.value})`
                },
                [
                  createElementVNode(
                    "animate",
                    {
                      attributeName: "stroke-dasharray",
                      from: `0, ${length.value}`,
                      to: `${length.value}, 0`,
                      dur: `${dur.value}s`,
                      repeatCount: "indefinite"
                    },
                    null,
                    8,
                    _hoisted_14
                  )
                ],
                8,
                _hoisted_13
              )
            ],
            8,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderBox = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-0a9ce059"]
]);
export { BorderBox as default };
